<template>
	<view class="rating-list-component">
		<view class="rating-item" v-for="(item, index) in orderCommentList" :key="index">
			<!-- 评分记录头部 -->
			<view class="rating-header">
				<view class="user-info">
					<view class="avatar">
						<image :src="`${config.commonUrl}/avt.png`" mode="aspectFill"></image>
					</view>
					<view class="user-details">
						<view class="username">{{item.operator.nickname || '系统消息'}}</view>
						<view class="rating-time">{{formatDate(item.createdAt)}}</view>
					</view>
				</view>
				<view class="score-change" :class="item.type === 'increase' ? 'score-increase' : 'score-decrease'">
					<text class="change-icon">{{item.type === 'increase' ? '+' : '-'}}</text>
					<text class="change-value">{{item.score}}</text>
				</view>
			</view>
			
			<!-- 评分描述 -->
			<view class="rating-content">
				<text class="rating-description">{{item.description || '暂无详情'}}</text>
			</view>
			
			<!-- 评分记录底部 -->
			<view class="rating-footer">
				<view class="remaining-score">
					<text class="score-label">变动后剩余积分：</text>
					<text class="score-value">{{item.beforeScore}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/config/config';
	
	export default {
		props: ['orderCommentList'],
		data() {
			return {
				config
			}
		},
		methods: {
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.rating-list-component {
		.rating-item {
			padding: 32rpx 24rpx;
			border-bottom: 1rpx solid #f5f5f5;
			transition: background-color 0.2s;
			
			&:last-child {
				border-bottom: none;
			}
			
			&:hover {
				background-color: #f8f9fa;
			}
			
			.rating-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 24rpx;
				
				.user-info {
					display: flex;
					align-items: center;
					flex: 1;
					
					.avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;
						border: 2rpx solid #f0f0f0;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.user-details {
						flex: 1;
						
						.username {
							font-size: 32rpx;
							color: #2C2622;
							font-weight: 600;
							margin-bottom: 8rpx;
							line-height: 1.2;
						}
						
						.rating-time {
							font-size: 24rpx;
							color: #8F97A2;
							line-height: 1.2;
						}
					}
				}
				
				.score-change {
					display: flex;
					align-items: center;
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
					font-weight: 600;
					
					&.score-increase {
						background: rgba(103, 194, 58, 0.1);
						color: #67C23A;
						
						.change-icon {
							font-size: 24rpx;
							margin-right: 4rpx;
						}
						
						.change-value {
							font-size: 28rpx;
						}
					}
					
					&.score-decrease {
						background: rgba(245, 108, 108, 0.1);
						color: #F56C6C;
						
						.change-icon {
							font-size: 24rpx;
							margin-right: 4rpx;
						}
						
						.change-value {
							font-size: 28rpx;
						}
					}
				}
			}
			
			.rating-content {
				margin-bottom: 24rpx;
				
				.rating-description {
					font-size: 28rpx;
					color: #606266;
					line-height: 1.6;
					word-break: break-all;
				}
			}
			
			.rating-footer {
				.remaining-score {
					display: flex;
					align-items: center;
					
					.score-label {
						font-size: 26rpx;
						color: #8F97A2;
					}
					
					.score-value {
						font-size: 28rpx;
						color: #FE6100;
						font-weight: 600;
					}
				}
			}
		}
	}
</style>
</style>